import { defineStore } from "pinia"
import { computed, onMounted, ref, watch } from "vue"
import { useWindowsWidthStore } from "@/store/windowsWidth"

const store = useWindowsWidthStore()
// Responsive layout
export const useResponsiveLayoutStore = defineStore("responsiveLayout", () => {
  const showType = ref()
  const isCollapsed = ref()
  const asideWidth = computed(() => isCollapsed.value ? "64px" : "200px")
  const open = ref()
  onMounted(() => {
    mode.responsive(store.windowsWidth)
  })
  const mode = {
    max: () =>{
      isCollapsed.value = false
      showType.value = "aside"
    },
    middle: () =>{
      isCollapsed.value = true
      showType.value = "aside"
    },
    min: () =>{
      isCollapsed.value = true
      showType.value = "drawer"
    },
    responsive: (n: any) =>{
      if (n > 1200) {
        mode.max()
      }
      if (n > 1000 && n < 1200) {
        mode.middle()
      }
      if (n < 1000) {
        mode.min()
      }
    }
  }
  const changeCollapsed = () => {
    isCollapsed.value = !isCollapsed.value
  }
  const changeOpen = () => {
    open.value = !open.value
  }
  watch(() => store.windowsWidth, () => {
    mode.responsive(store.windowsWidth)
  })

  return { asideWidth, isCollapsed, showType, open, changeCollapsed, changeOpen }
})
